<template>
  <view>
     <my-search @click="gotoSearch" class="mySearch"></my-search>
    <view class="scroll-view-container">
      <!-- 左侧的滚动视图区域 -->
      <scroll-view class="left-scroll-view" scroll-y :style="{height: wh + 'px'}" >
        <view :class="{'left-scroll-view-item':true,'active':index===activeIndex}" v-for="(item,index) in cartList" :key="index" @click="changeActive(index)">{{item.cat_name}}</view>
      </scroll-view>
      <!-- 右侧的滚动视图区域 -->
      <scroll-view class="right-scroll-view" scroll-y :style="{height: wh + 'px'}" :scroll-top="scrollTop">
       
        <view class="cate-lv2" v-for="(item,index) in childrenList" :key="index">
          <view class="cate-lv2-title" >/{{item.cat_name}}/</view>
          <view class="cate-lv3-list">
             <view class="cate-lv3-item" v-for="(item2,index2) in item.children" :key="index2" @click=gotoGoodsList(item)>
               <image :src="item2.cat_icon" mode=""></image>
                <view class="text">{{item2.cat_name}}</view>
             </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  import tabbarBadge from '../../mixins/tabbar-badge';
  export default {
    
    mixins:[tabbarBadge],
    data() {
      return {
        wh:0,
        cartList:[],
        activeIndex:0,
        childrenList:[],
        scrollTop:0
      };
    },
    onLoad(){
      this.getHeigth()
      this.getCateList()
    },
    methods:{
      async getCateList(){
        const {data:res} = await uni.$http.get('/api/public/v1/categories')
        if(res.meta.status!==200){
          return uni.$showMsg()
        }
        this.cartList = res.message
        this.childrenList = this.cartList[0].children
      },
      changeActive(index){
        this.activeIndex = index
        this.childrenList = this.cartList[index].children
        this.scrollTop = this.scrollTop === 0 ? 1 : 0
      },
      async getHeigth() {
        const sysInfo = await uni.getSystemInfo()
        this.wh = sysInfo.windowHeight-50
      },
      gotoGoodsList(item){
        uni.navigateTo({
          url:`/subpackage/goods_list/goods_list?cid=${item.cat_id}`
        })
      },
      gotoSearch(){
        uni.navigateTo({
          url:'/subpackage/search/search'
        })
      }
    }
  }
</script>

<style lang="scss">
  .mySearch{
    position: sticky;
    top: 0;
    z-index: 999;
     // position: fixed;
     //  top: var(--window-top, 0); // 兼容沉浸式
     //  left: 0; right: 0;
     //  z-index: 999;
     //  background: #fff;
  }
.scroll-view-container{
  display: flex;
  .left-scroll-view {
    width: 120px;
    .left-scroll-view-item{
      line-height: 60px;
            background-color: #f7f7f7;
            text-align: center;
            font-size: 12px;
      &.active{
        position: relative;
        background-color: aliceblue;
        &::before{
          content: '';
          display: block;
            height: 30px;
             width: 3px;
              background-color:brown;
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
        }
      }
    }
  }
  .right-scroll-view{
    background-color: #ffffff;
    .cate-lv2{
      .cate-lv2-title{
        font-size: 12px;
        font-weight: bold;
        text-align: center;
        padding: 15px 0
      }
      .cate-lv3-list{
        display: flex;
        flex-wrap: wrap;
        .cate-lv3-item{
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 33.33%;
          image{
                  width: 60px;
                  height: 60px;
          }
         
        }
      }
    }
  }
}
</style>